import { Table, Button, Input, Select } from 'antd';
import { useEffect, useState } from 'react';
import { PlayCircleTwoTone } from '@ant-design/icons';
import useGetData from 'hooks/useGetData';
import { getDeckList } from '@/api/modules/group';
import { getCardsList } from 'api/cards';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { SUPER_ADMIN_AUTH_KEY } from '@conf';
import Header from 'components/ReturnHeader';
import { dateFormat } from '@/utils/funcs';

export default function () {
	const { filterInfo, page, viewInfo, setFilterInfo, setPageIndex, setViewInfo }: any = useGetData(
		getDeckList,
		{ name: '' },
		'list'
	);
	const [detail, setdetail] = useState([]);
	const navigate = useNavigate();
	return (
		<>
			<Header title='选择牌组' />
			<div className=' p-2'>
				<div className=' flex items-center mb-4'>
					<Input
						style={{ width: 260 }}
						value={filterInfo.name}
						onChange={({ target: { value: name } }) => {
							setFilterInfo({ ...filterInfo, name }); // deep clone
						}}
						allowClear
						placeholder='输入关键词筛选'
					/>
				</div>
				<div className=' flex flex-wrap gap-2'>
					{viewInfo.list.map(({ name, createtime, id }: any, index: number) => {
						return (
							<div key={'item-' + index} className='cursor-pointer rounded-lg p-2 flex items-center bg-blue-100'>
								<div className=' mr-2'>
									<p>{name}</p>
									<p className=' text-xs text-gray-400'>{dateFormat(createtime)}</p>
								</div>
								<Button
									icon={<PlayCircleTwoTone />}
									onClick={() => {
										navigate(`../mahjongmain/${id}`);
									}}
								/>
							</div>
						);
					})}
				</div>
			</div>
		</>
	);
}
